import { Button, Card, List, Modal } from "antd";
import { Param } from "./params/types";
import { useState } from "react";
import { min_app_shell } from '@linksaas-minapp/api';
import EditParam from "./EditParam";

export interface ParamPanelProps {
    params: Param[];
    cfg: unknown;
    onChange: (newValue: unknown) => void;
}

export function ParamPanel(props: ParamPanelProps) {
    const [showModal, setShowModal] = useState(false);

    return (
        <Card bordered={false} extra={
            <Button onClick={e => {
                e.stopPropagation();
                e.preventDefault();
                setShowModal(true);
            }}>增加参数</Button>
        }>
            <List rowKey="name" dataSource={props.params.filter(p => (props.cfg as any)[p.name] !== undefined)} renderItem={param => (
                <Card bordered={false} title={param.name} extra={
                    <Button onClick={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        const tmpCfg = props.cfg;
                        delete (tmpCfg as any)[param.name];
                        props.onChange(tmpCfg);
                    }}>删除参数</Button>
                }>
                    <p>{param.descCn}</p>
                    <p>{param.descEn}</p>
                    <p>默认配置:&nbsp;{JSON.stringify(param.defaultValue)}</p>
                    {param.demoValue !== undefined && (
                        <p>参考配置:&nbsp;{JSON.stringify(param.demoValue)}</p>
                    )}
                    <EditParam value={(props.cfg as any)[param.name]} defaultValue={param.defaultValue} demoValue={param.demoValue} optionList={param.optionList}
                        validValue={param.validValue} ruleSelect={param.ruleSelect ?? false} onChange={value => {
                            const tmpCfg = props.cfg;
                            (tmpCfg as any)[param.name] = value;
                            props.onChange(tmpCfg);
                        }} />
                </Card>
            )} />
            {showModal == true && (
                <Modal title="参数列表" open footer={null} bodyStyle={{ maxHeight: "calc(100vh - 200px)", overflowY: "auto" }}
                    onCancel={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setShowModal(false);
                    }}>
                    <List rowKey="name" dataSource={props.params.filter(p => (props.cfg as any)[p.name] === undefined)} renderItem={param => (
                        <Card bordered={false} title={param.name} style={{ width: "100%" }} extra={
                            <Button onClick={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                const tmpCfg = props.cfg;
                                (tmpCfg as any)[param.name] = param.defaultValue;
                                props.onChange(tmpCfg);
                                setShowModal(false);
                            }}>添加参数</Button>
                        }>
                            <p>{param.descCn}</p>
                            <p>{param.descEn}</p>
                            <div style={{ display: "flex", justifyContent: "flex-end", height: "30px" }}>
                                <Button type="link" onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    if (param.url != "") {
                                        min_app_shell.openBrowser(param.url);
                                    }
                                }}>查看详情</Button>
                            </div>
                        </Card>
                    )} />
                </Modal>
            )}
        </Card>
    );
}